<template>
 <div>

    <el-button type="primary" icon="el-icon-plus" style="margin: 10px 0px;" @click="addBrand">添加</el-button>
    
    <!-- 品牌数据展示表格 -->
    <el-table style="width: 100%;" border :data="list">
      <el-table-column label="序号" type="index" width="80px" align="center"></el-table-column>
      <el-table-column label="品牌名称" prop="tmName"  align="center">
      </el-table-column>
      <el-table-column label="品牌logo" prop="prop"  align="center">
        <template scope="{row}">
          <img :src="row.logoUrl" alt="" style="width: 100px;height: 70px;">
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template scope="{row}">
          <el-button type="warning" icon="el-icon-edit" size="mini" @click="updateBrand(row)">修改</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteBrand(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination style="margin-top: 20px;text-align: center;"  :total="total" :current-page="page" 
    :page-sizes="[3,5,10]" :page-count="7" @current-change="getTrademarkList" @size-change="sizeChange"
    :page-size="limit" layout="prev,pager,next,jumper,->,sizes,total" ></el-pagination>
 
    <!--弹出框-->
    <el-dialog :title="brandInfo.id?'修改品牌':'添加品牌'" :visible.sync="dialogFormVisible">
          <!-- 弹出框第一行 -->
      <el-form style="width: 80%;" :rules="rules" :model="brandInfo" ref="formRule">
        <el-form-item label="品牌名称" label-width="100px"  prop="tmName">
          <el-input autocomplete="off" v-model="brandInfo.tmName"></el-input>
        </el-form-item>
           <!-- 弹出框第二行 -->
        <el-form-item label="品牌logo" label-width="100px" prop="logoUrl">
              <!-- 上传图片 -->
          <el-upload
          class="avatar-uploader"
            action="/dev-api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="brandInfo.logoUrl" :src="brandInfo.logoUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
         <!-- 弹出框第三部分 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureBrand">确 定</el-button>
      </div>
    </el-dialog>



 </div>
</template>

<script>


export default {
    name: 'tradeMark',
    data(){
        return{
            page:1,
            limit:3,
            total:0,
            // 每页每条具体的数据对象
            list:[],
            dialogFormVisible:false,
            brandInfo:{
              logoUrl:'',
              tmName:''
            },
            // 表单验证规则
            rules: {
              tmName: [
                { required: true, message: '请输入品牌名称', trigger: 'blur' },
                { min: 2, max: 5, message: '长度在 2到 5 个字符', trigger: 'change' },
              ],
              logoUrl: [
                { required: true, message: '请选择品牌图片'}
              ],
            }

         }
     },
    mounted() {
    this.getTrademarkList();
    },
    methods: {
      //向服务器要当前页的数据
      async getTrademarkList(newpage=1) {
        this.page=newpage;
        const { page, limit } = this;
        let result = await this.$tradeAPI.trademark.reqTradeMarkList(page, limit);
        if (result.code == 200) {
          this.total = result.data.total;
          this.list = result.data.records;
        }
      },
      // 分页器
      sizeChange(limit){
        this.limit=limit;
        this.getTrademarkList();
      },
      // 弹出框上传图片
      handleAvatarSuccess(res, file) {
        // res是图片的服务器地址
        // file包含图片名称，地址等等信息
        this.brandInfo.logoUrl=res.data
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

      addBrand(){
        this.dialogFormVisible=true;
        this.brandInfo={tmName:'',logoUrl:''}
      },

      updateBrand(row){
        this.dialogFormVisible=true;
        this.brandInfo={...row};
      },

      sureBrand(){
        this.$refs.formRule.validate(async (success)=>{
          if(success){
            this.dialogFormVisible = false;
            let result=await this.$tradeAPI.trademark.reqAddUpdatdeTrademark(this.brandInfo);
            if(result.code==200){
              this.$message({
                type:'success',
                message:this.brandInfo.id?'修改成功':'添加成功'});
              this.getTrademarkList(this.brandInfo.id?this.page:1)
            }
          }else{
            console.log('error submit!!');
            return false;
          }
        
        })
        
      },

      deleteBrand(row){
        // 弹框
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let result=await this.$tradeAPI.trademark.reqDeleteMarktrade(row.id);
          if(result.code==200){
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getTrademarkList(this.list.length>1?this.page:this.page-1)
          }
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      

      }
    

    }

 }   
</script>

<style>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
